<template>
	<div style="width: 100vw">
		<div style="width: 800px; height: 400px; margin: 100px auto">
			<div class="head" style="display: flex; margin: 20px 55px; justify-content: space-between">
				<el-button type="primary" :icon="House" @click="init()">首层</el-button>
				<el-button type="primary" :icon="Back" v-if="paramdata.data.index" @click="back()">
					返回
				</el-button>
			</div>
			<div ref="chartRef" style="width: 100%; height: 100%"></div>
		</div>
		<div>
			<el-radio-group size="large" v-model="currentYear">
				<el-radio-button :label="year" v-for="year in years">{{ year + '年' }}</el-radio-button>
			</el-radio-group>
		</div>
	</div>
</template>

<script setup>
import { Back, House } from '@element-plus/icons-vue'
import { ref, onMounted, reactive, watch } from 'vue'
import * as echarts from 'echarts'
import { get } from '@/api/http.js'

const chartRef = ref(null)
const years = ref([])
const currentYear = ref(0)
const paramdata = reactive({
	data: {
		condition: '',
		index: 0
	}
})
const getRecentYears = () => {
	currentYear.value = new Date().getFullYear()
	paramdata.data.condition = currentYear.value
	for (let i = 0; i < 5; i++) {
		years.value.push(currentYear.value - i)
	}
}

const date = {
	0: {
		dateTime: '月',
		showTime: '',
		xdate: ''
	},
	1: {
		dateTime: '日',
		showTime: '',
		xdate: ''
	},
	2: {
		dateTime: '时',
		showTime: '',
		xdate: ''
	},
	3: {
		dateTime: '分',
		showTime: '',
		xdate: ''
	},
	4: {
		dateTime: '秒',
		showTime: '',
		xdate: ''
	}
}
let index = 0
let data = []
let chart = null
const option = {
	title: {
		text: '近五年数据',
		left: 50
	},
	xAxis: {
		type: 'category',
		name: '月',
		data: [] // Use the first segment's x data for xAxis
	},
	yAxis: {
		type: 'value',
		name: '(单位/Mpa)'
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				show: true,
				backgroundColor: '#333', // tooltip 圆点背景颜色
				padding: [10, 10], // tooltip 圆点内边距
				textStyle: {
					fontSize: 16 // tooltip 圆点字体大小
				}
			}
		}
	},
	legend: {
		data: ['起始压力', '结束压力', '压差']
	},
	series: [
		{
			type: 'line',
			showSymbol: false,
			data: [],
			name: `起始压力`,
			markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' }
				],
				silent: true
			},
			symbolSize: [10, 10]
		},
		{
			type: 'line',
			showSymbol: false,
			data: [],
			name: `结束压力`,
			markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' }
				],
				silent: true,
				symbolSize: [10, 10]
			}
		},
		{
			type: 'line',
			showSymbol: false,
			data: [],
			name: `压差`,
			markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' }
				],
				silent: true,
				symbolSize: [10, 10]
			}
		}
	]
}
const getData = async () => {
	let res = await get('/api/test', paramdata.data)
	if (res.code == 200) {
		data = res.data
		index = res.index
		let str = ''
		for (let i = 1; i <= index; i++) {
			str += date[i].showTime + date[i - 1].dateTime
		}
		option.title.text = str
		option.xAxis.name = date[paramdata.data.index].dateTime
		option.xAxis.data = data.map((item) => item.xdate)
		option.series[0].data = data.map((item) => item.qsyl)
		option.series[1].data = data.map((item) => item.jsyl)
		option.series[2].data = data.map((item) => item.yc)
	}
}

onMounted(() => {
	getRecentYears()
	// drawChart()
})
watch(currentYear, (n, o) => {
	paramdata.data.condition = n
	paramdata.data.index = 0
	date[0].xdate = n
	drawChart()
})
const drawChart = async () => {
	await getData()
	if (chart) chart.dispose()
	chart = echarts.init(chartRef.value)
	chart.setOption(option)
	chart.on('click', onChartClick)
}

const onChartClick = (params) => {
	if (index == 4) {
		return
	}
	paramdata.data.index = index + 1
	paramdata.data.condition = data.map((item) => item.date)[params.dataIndex]
	date[paramdata.data.index].xdate = paramdata.data.condition
	date[paramdata.data.index].showTime = params.name
	drawChart()
}

const back = () => {
	if (index == 0) {
		return
	}
	paramdata.data.index = index - 1
	paramdata.data.condition = date[paramdata.data.index].xdate
	drawChart()
}
const init = () => {
	paramdata.data.condition = currentYear.value
	paramdata.data.index = 0
	drawChart()
}
</script>
